import React, { useEffect } from 'react';
import { Layout, Menu, Dropdown } from 'antd';
import { HomeOutlined, MailOutlined, UserOutlined, SmileOutlined } from '@ant-design/icons';
import { Route, Routes, useNavigate } from 'react-router-dom';
import AccountManagement from '../AccountManagement/AccountManagement';
import BranchManagement from '../BranchManagement/BranchManagement';
import MemberManagement from '../MemberManagement/MemberManagement';
import CouponManagement from '../CouponManagement/CouponManagement';
import PointsManagement from '../PointsManagement/PointsManagement';
import Settings from '../Settings/Settings';
import StoreDecoration from '../StoreDecoration/StoreDecoration';
import Home from '../Home/Home';

const { Header, Content, Sider } = Layout;

export default function Dashboard() {
  const navigate = useNavigate();

//   useEffect(() => {
//     navigate('/dashboard/home');
//   }, [navigate]);

  const handleMenuClick = ({ key }) => {
    if (key === '2') {
      navigate('/');
    }
  };

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1">修改密码</Menu.Item>
      <Menu.Item key="2">退出登录</Menu.Item>
    </Menu>
  );

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible>
        <div className="logo" style={{ color: 'white', textAlign: 'center', padding: '16px 0', lineHeight: '1px' }}>
          洗鞋后台管理系统
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/dashboard/home']}
          onClick={({ key }) => navigate(key)}
        >
          <Menu.Item key="/dashboard/home" icon={<HomeOutlined />}>
            首页
          </Menu.Item>
          <Menu.Item key="/dashboard/account" icon={<MailOutlined />}>
            账号管理
          </Menu.Item>
          <Menu.Item key="/dashboard/branch" icon={<UserOutlined />}>
            分店管理
          </Menu.Item>
          <Menu.Item key="/dashboard/member" icon={<UserOutlined />}>
            会员管理
          </Menu.Item>
          <Menu.Item key="/dashboard/coupon" icon={<UserOutlined />}>
            优惠券管理
          </Menu.Item>
          <Menu.Item key="/dashboard/points" icon={<UserOutlined />}>
            积分管理
          </Menu.Item>
          <Menu.Item key="/dashboard/settings" icon={<UserOutlined />}>
            基础设置
          </Menu.Item>
          <Menu.Item key="/dashboard/store" icon={<UserOutlined />}>
            门店装修
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#B3BED9', padding: '0 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <SmileOutlined style={{ fontSize: '24px', color: 'white' }} />
          <Dropdown overlay={menu}>
            <div style={{ cursor: 'pointer' }}>dev</div>
          </Dropdown>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
            <Routes>
              <Route path="home" element={<Home />} />
              <Route path="account" element={<AccountManagement />} />
              <Route path="branch" element={<BranchManagement />} />
              <Route path="member" element={<MemberManagement />} />
              <Route path="coupon" element={<CouponManagement />} />
              <Route path="points" element={<PointsManagement />} />
              <Route path="settings" element={<Settings />} />
              <Route path="store" element={<StoreDecoration />} />
            </Routes>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}